import React from "react";
import { Layout, Menu, Button, Space, Tooltip, Modal } from "antd";
import { Outlet, useNavigate, useLocation } from "react-router-dom";
import { useMenuItems } from "../router/menuConfig";
import { useTheme } from "../contexts/ThemeContext";
import { SunOutlined, MoonOutlined, LogoutOutlined } from "@ant-design/icons";
import { useUserStore } from "@/stores/userStore";
import { useTranslation } from "react-i18next";
import LanguageSwitch from "@/components/LanguageSwitch";

const { Header, Sider, Content } = Layout;

const MainLayout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const menuItems = useMenuItems();
  const { isDarkMode, toggleTheme } = useTheme();
  const { userInfo, logout } = useUserStore();
  const { t } = useTranslation();

  const handleLogout = () => {
    Modal.confirm({
      title: t('layout.logoutConfirm'),
      content: t('layout.logoutConfirm'),
      okText: t('common.confirm'),
      cancelText: t('common.cancel'),
      onOk: () => {
        logout();
        navigate('/login');
      }
    });
  };

  // 获取当前选中的菜单项
  const getSelectedKeys = () => {
    const pathname = location.pathname;
    // 如果是根路径，直接返回
    if (pathname === '/') return ['/'];
    return [pathname];
  };

  // 获取当前展开的子菜单
  const getOpenKeys = () => {
    const pathname = location.pathname;
    const pathSegments = pathname.split('/').filter(Boolean);
    if (pathSegments.length > 1) {
      return [`/${pathSegments[0]}`];
    }
    return [];
  };

  return (
    <Layout style={{ minHeight: "100vh" }}>
      <Header
        style={{
          background: isDarkMode ? "#141414" : "#fff",
          padding: "0 20px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          boxShadow: "0 1px 4px rgba(0,21,41,.08)",
        }}
      >
        <h1 style={{ margin: 0, color: isDarkMode ? "#fff" : "#000" }}>{t('layout.title')}</h1>
        <Space>
          <span style={{ color: isDarkMode ? "#fff" : "#000" }}>
            {userInfo?.user_name || t('layout.user')}
          </span>
          <Tooltip title={isDarkMode ? t('layout.lightMode') : t('layout.darkMode')}>
            <Button
              type="text"
              icon={isDarkMode ? <SunOutlined /> : <MoonOutlined />}
              onClick={toggleTheme}
              style={{ color: isDarkMode ? "#fff" : "#000" }}
            />
          </Tooltip>
          <LanguageSwitch />
          <Tooltip title={t('layout.logout')}>
            <Button
              type="text"
              icon={<LogoutOutlined />}
              onClick={handleLogout}
              style={{ color: isDarkMode ? "#fff" : "#000" }}
            />
          </Tooltip>
        </Space>
      </Header>
      <Layout>
        <Sider width={200} style={{ background: isDarkMode ? "#141414" : "#fff" }}>
          <Menu
            mode="inline"
            selectedKeys={getSelectedKeys()}
            defaultOpenKeys={getOpenKeys()}
            style={{ height: "100%", borderRight: 0 }}
            items={menuItems}
            onClick={({ key }) => navigate(key)}
            theme={isDarkMode ? "dark" : "light"}
          />
        </Sider>
        <Layout style={{ padding: "24px" }}>
          <Content
            style={{
              background: isDarkMode ? "#141414" : "#fff",
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default MainLayout;
